<template>
	<scroll-view  class="notify-page" scroll-y="true" :refresher-enabled="true" @scrolltolower="loadmore" lower-threshold="50" >
		<view class="notify-item" v-for="item in 30" >
			<view class="item-icon new" >
				<image src="../../static/images/icons/notify.png" style="width: 100%;height: 100%;" > </image>
			</view>
			<view class="item-content">
				<view class="msg-title">System messages</view>
				<view class="msg-desc">Change Password </view>
			</view>
			<view class="item-datetime">15:00</view>
		</view>
	
	</scroll-view>
</template>

<script setup>
	import { ref } from 'vue';
	const notifyList = ref([]);
	
	
	const loadmore = ()=>{
		console.log('loading')
	}
</script>

<style lang="scss" scoped > 
.notify-page{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background-color: #fff;
	padding: 0 30rpx;
	.notify-item{
		width: 100%;
		height: 148rpx;
		border-bottom: 0.58rpx solid #E8E8E8;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-start;
		.item-icon{
			flex: 0 0 72rpx;
			height: 72rpx;
			border-radius: 50%;
			overflow: hidden;
			background-color: #E3E5EC;
			padding: 7rpx;
			&.new{
				background-image: linear-gradient(90deg, #FF6623 17%, #F22E40 91%), linear-gradient(180deg, #F86178 0%, #FEA6B1 100%);
			}
		}
		.item-content{
			flex: 1;
			margin-left: 30rpx;
			.msg-title{
				color: #222222;
				font-size: 25rpx;
				font-weight: 600;
			}
			.msg-desc{
				margin-top: 7rpx;
				font-size: 23rpx;
				color: #888888;
			}
		}
		.item-datetime{
			flex: 1;
			text-align: right;
			color: #888888;
			font-size: 22rpx;
			height: 72rpx;
			line-height: 45rpx;
		}
	}
	
	.uni-list-chat__container{
		padding: 30rpx 0 !important;
	}
}	
	
</style>